<template>
  <div class="advantage">
    <div class="title">
      重视产品内在逻辑
    </div>
    <div class="content">
      <div class="left">
        <div class="card">
          <div class="sub-title">
            表现层
          </div>
          <div class="sub-desc">
            UED，IOS/Android
          </div>
        </div>
        <div class="card mt-space">
          <div class="sub-title">
            数据层
          </div>
          <div class="sub-desc">
            稳定流程，安全性，数据分析
          </div>
        </div>
      </div>
      <div class="center">
        <img src="@/assets/images/service/advantage/earth@2x.png" alt="">
      </div>
      <div class="right">
        <div class="card bg-color">
          <div class="sub-title">
            业务层
          </div>
          <div class="sub-desc">
            需求优先级规划，产品MVP <br/>
            验证产品迭代，产品运营
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue';
</script>

<style scoped lang="scss">
.advantage {
  width: 100%;
}

.advantage .title {
  font-size: 30px;
  font-weight: 400;
  text-align: center;
  color: #000000;
  margin: 80px 0 40px 0;
}

.advantage .content {
  display: flex;
  padding: 0 40px;
}

.advantage .content .left {
  flex: 1;
}

.advantage .content .center {
  flex: 2;
  display: flex;
  justify-content: center;
}

.advantage .content .center img {
  width: 531px;
}

.advantage .content .right {
  flex: 1;
}

.advantage .content .card {
  width: 424px;
  height: 158px;
  background: #FFFAF0;
  border-radius: 0 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.advantage .content .card .sub-title {
  font-size: 26px;
}

.advantage .content .card .sub-desc {
  font-size: 18px;
  color: #B9C3CB;
}

.advantage .content .bg-color {
  width: 430px;
  background: #F0F6FF !important;
  margin-top: 280px;
}

.advantage .content .mt-space {
  margin-top: 176px;
}

@media screen and (max-width: 780px) {
  .wrap {
    width: 100%;
  }
  .wrap .content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px 20px !important;
  }
  .wrap .content .mt-space {
    margin-top: 20px;
  }
  .wrap .content .card {
    width: 100%;
  }
  .wrap .content .bg-color {
    margin-top: 0;
  }
  .wrap .content img {
    width: 280px !important;
  }
}

</style>